<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM事件监听</title>
</head>
<body>
    <button onclick="alert('最近降温，注意保暖！')">弹出警告框</button>
    <button id="btn">我是按钮</button>
    <h4>震惊:居然发生了这种事...</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dignissimos eius, in laboriosam modi
            molestiae, nisi quisquam sapiente sed similique soluta unde voluptate? Deleniti dolor eaque quod unde?
            Omnis!
        </div>
        <div>Adipisci blanditiis debitis distinctio error minima nulla quasi, qui! Alias commodi dolorum reprehenderit
            repudiandae tempora tenetur veritatis voluptate? Autem blanditiis delectus distinctio enim esse iusto nisi
            repellendus sapiente tempore tenetur?
        </div>
        <div>A, alias aliquid consectetur ducimus earum et eveniet harum id impedit ipsa labore necessitatibus officiis
            perferendis praesentium qui quos vel vitae. Ea harum impedit incidunt molestias sapiente vel veritatis.
            Atque.
        </div>
        <div>Architecto corporis cumque est fugit voluptatibus? Accusamus ad at dignissimos earum eius esse, illo iure
            libero molestiae neque nulla odit officia omnis pariatur praesentium quae quas sapiente sint ullam
            voluptate!
        </div>
        <div>Amet, consequuntur, dolores. Alias ea eius error et in ipsam molestias odio odit quasi repudiandae? Debitis
            delectus distinctio est, expedita explicabo id molestias non odio quae, sequi tempore temporibus vitae!
        </div>
        <div>Ab accusamus ad corporis, culpa debitis, doloribus exercitationem facilis harum iste maxime nemo nisi
            obcaecati placeat quidem sint sit, temporibus voluptatum. Autem omnis quas similique? Accusamus cum
            recusandae soluta voluptas.
        </div>
        <div>Consequatur eveniet fuga iure nihil nobis perspiciatis tempore velit? Cum deserunt et ex facilis incidunt
            iure maiores, minus modi nesciunt nulla officiis porro quaerat quas ratione, soluta veniam, voluptates.
            Ratione.
        </div>
        <div>Deleniti est facilis ipsum laboriosam natus necessitatibus quas voluptatibus voluptatum! Adipisci aperiam
            deleniti, dicta dolorem doloremque, excepturi fugiat impedit ipsum nam officia placeat provident, quaerat
            quia quibusdam sequi temporibus vel?
        </div>
        <div>A adipisci blanditiis corporis dignissimos harum inventore laboriosam neque obcaecati officia omnis, quae
            quibusdam quidem quis reprehenderit, soluta ut velit vero? Aspernatur atque dolores doloribus exercitationem
            magni neque optio qui.
        </div>
        <div>Aperiam eius natus rerum voluptas voluptate. Accusamus animi aspernatur at aut blanditiis cupiditate et eum
            exercitationem iste iusto laborum laudantium minus natus nulla obcaecati officia quae repudiandae suscipit,
            tempora veritatis.
        </div>
        <div>Accusamus consequatur dolore, ducimus eaque enim esse fugiat hic illum incidunt itaque iusto magni
            necessitatibus nemo perferendis placeat, quae quam, quia repellendus sed sint sit temporibus vel
            voluptatibus! Eum, odit.
        </div>
        <div>Atque culpa delectus deserunt distinctio doloremque enim est expedita ipsa nesciunt, odit officiis quaerat
            quam quibusdam quisquam rerum sequi, sunt tempore! Cum eum excepturi omnis reiciendis unde. Ipsum,
            necessitatibus, ratione?
        </div>
        <div>Ad at dolor error eum eveniet exercitationem maxime nisi numquam, officiis quia, repellat suscipit
            temporibus voluptatibus? Adipisci asperiores culpa, deserunt dolorum ducimus, eius excepturi maxime quae qui
            quidem sit temporibus.
        </div>
        <div>Adipisci architecto consectetur consequuntur corporis deleniti, dolorem error est eum eveniet explicabo
            fuga hic illum minus nam necessitatibus nemo numquam officia perspiciatis quaerat quidem, reprehenderit
            temporibus totam unde velit voluptas?
        </div>
        <div>A, deleniti, dicta doloribus ea eaque enim eos excepturi harum nulla odit quos sed temporibus veritatis.
            Aliquam aperiam at delectus doloremque, dolores earum facere facilis nobis odio pariatur, possimus quae!
        </div>
        <div>Aspernatur dolore et exercitationem expedita in magni sunt voluptas. Autem doloremque dolorum iste quia
            quidem! A, commodi dolorem eius error explicabo fugit ipsum iusto, mollitia necessitatibus quos rem
            veritatis voluptatum!
        </div>
        <div>Amet animi atque beatae eligendi, error exercitationem illum ipsum itaque iusto labore laudantium maiores
            minus nemo nobis non obcaecati odit pariatur praesentium quasi quia quod rem repellat sunt totam ut.
        </div>
        <div>Aliquid at dolorem eligendi et eum impedit inventore laboriosam laborum modi nam nemo nihil quisquam velit
            vero, voluptatibus! Alias aliquid beatae culpa dolore dolorem doloribus illo inventore magnam nostrum nulla.
        </div>
        <div>Alias blanditiis consequuntur distinctio, dolore dolorum enim ex, maxime, nobis sapiente temporibus tenetur
            vitae! Accusamus amet, aut cumque ea eaque eligendi ex laboriosam, molestiae, mollitia obcaecati
            perspiciatis quisquam repellendus ullam.
        </div>
        <div>Iure nam officia pariatur. Adipisci consequuntur incidunt modi quas vel. Adipisci atque, commodi corporis
            cupiditate debitis dolorem harum impedit in laudantium optio pariatur quia quibusdam quis sit totam veniam
            vitae.
        </div>
        <div>Architecto corporis esse fugit ipsam natus nostrum quis quisquam rerum sapiente sequi! A deserunt doloribus
            earum ex harum incidunt magnam maxime modi non nulla optio praesentium, provident reprehenderit unde
            voluptates.
        </div>
        <div>Atque ducimus eius eligendi fugiat inventore, iste laboriosam magni minima minus nam nostrum, quod
            repudiandae sint. Ad commodi consectetur, dignissimos doloribus eligendi eveniet fugit magni nobis non,
            omnis qui, repudiandae.
        </div>
        <div>Ad aut consequatur dolorem et exercitationem explicabo, facilis fugit laboriosam molestiae optio pariatur
            porro quasi quibusdam quod tempore voluptate voluptatibus. Ad cumque debitis dolorum ducimus eveniet harum
            labore nam quae.
        </div>
        <div>Aliquid corporis ea eius eveniet labore libero magnam officia qui. A odio, tenetur! Amet deleniti
            distinctio porro quam quasi voluptate! Aperiam at doloribus ducimus nostrum quasi sapiente sit soluta
            voluptatibus.
        </div>
        <div>Ab animi asperiores aut delectus deserunt dignissimos eos error facere id, impedit in labore laborum,
            libero minus nesciunt nulla optio recusandae rerum, sapiente sequi tempore ut voluptatem voluptatibus. Esse,
            voluptate.
        </div>
        <div>Ab commodi debitis earum explicabo laboriosam molestias quis! Aliquid autem culpa ducimus eaque est natus
            nemo nisi nulla, optio, porro qui quis quod repellat sequi suscipit. Commodi corporis quidem quos.
        </div>
        <div>Adipisci cupiditate ducimus eligendi exercitationem expedita libero perferendis perspiciatis quisquam quo,
            repellat. Accusantium aut nesciunt tempora. Accusamus aliquam atque, eum ex fuga harum impedit itaque
            laudantium nulla repellendus! Architecto, nam?
        </div>
        <div>Adipisci aperiam architecto at atque blanditiis consequatur consequuntur cum delectus dignissimos dolorem
            dolorum et ex exercitationem illo minus non obcaecati perferendis placeat quas recusandae sed soluta
            tempore, ut vel voluptates.
        </div>
        <div>Ad aspernatur cum eligendi error expedita facere fugit incidunt ipsum, laudantium, nisi non obcaecati odio
            pariatur quae quis recusandae repudiandae, vero voluptate. Architecto aspernatur ex explicabo perspiciatis
            quia tempore voluptates?
        </div>
        <div>Asperiores at consectetur consequuntur cum cumque dicta enim esse harum incidunt ipsa labore, magni nam
            natus necessitatibus nesciunt numquam provident quae quasi quis, quod sed sequi suscipit temporibus ut
            voluptates.
        </div>
        <div>At consequatur dignissimos doloremque eaque esse eum hic ipsum, nihil officiis quibusdam recusandae rem
            rerum temporibus tenetur totam ullam veniam. At commodi dolorum et eveniet ipsa magni molestias nam
            perspiciatis?
        </div>
        <div>Debitis et excepturi exercitationem fuga illo maxime, officia. Cumque et ipsum labore magni, neque
            praesentium quos! Dolorem eaque et inventore, ipsa ipsum magnam minus natus neque omnis voluptatum?
            Accusamus, et!
        </div>
        <div>Alias consequatur cumque doloribus dolorum eum inventore magni mollitia placeat porro, quae quibusdam
            reiciendis vel veritatis! Ad alias amet delectus doloremque enim labore, nemo odit perferendis perspiciatis,
            quaerat recusandae tempore.
        </div>
        <div>Ab adipisci atque blanditiis dicta ea, eaque error fuga inventore iste neque, officiis optio quae rem sequi
            sunt suscipit tenetur, vel. Beatae illo magni non odio, odit ratione velit voluptatem.
        </div>
        <div>Delectus illo ipsam natus omnis porro! Dolorum excepturi facere fuga in iste libero quisquam rem repellat?
            Autem distinctio, ducimus expedita inventore laborum natus placeat soluta. Aut consectetur doloribus esse
            velit?
        </div>
        <div>Consequuntur dolorum minus porro quis sunt ullam. Ab alias animi aut beatae consequatur dolorum esse ipsam
            iure laboriosam magnam minus quaerat quibusdam quidem, sit suscipit, temporibus voluptas! Dolore, error,
            quae!
        </div>
        <div>Alias consequatur dolore earum explicabo facilis fuga id inventore, ipsa labore laborum minus modi
            molestias mollitia natus nihil pariatur perferendis perspiciatis placeat quae, quisquam quo sed unde veniam
            vitae voluptas.
        </div>
        <div>Dicta ex fuga molestias nam nostrum numquam quam! Asperiores, dicta ex id iste nostrum repudiandae. Ab
            atque cupiditate distinctio dolorum, eius obcaecati veniam? Alias harum molestias necessitatibus optio
            reprehenderit ut!
        </div>
        <div>Aliquid autem consequatur corporis dolor eaque obcaecati placeat quia quod sequi sunt! Accusamus autem
            consequuntur distinctio dolorem dolores eos eveniet excepturi illum impedit itaque molestias, nesciunt
            perferendis quis saepe veniam.
        </div>
        <div>Aliquam cum dicta eveniet facere illo ipsa laborum maxime odio optio praesentium sed, suscipit tenetur vero
            vitae voluptatibus. Eum libero molestias pariatur porro repellat. Iure natus saepe ullam velit voluptas.
        </div>
        <div>Doloribus harum id necessitatibus neque nulla quidem, tempore ut voluptatum. Aliquid animi cumque
            necessitatibus odit quisquam recusandae repellendus, vel. Debitis eius eligendi et harum, illum iste
            mollitia natus nihil nobis?
        </div>
        <div>Alias consequatur eos minima officia omnis praesentium vitae? Accusantium, adipisci animi autem debitis,
            eveniet explicabo ipsa labore nobis porro provident quisquam repellat repellendus sunt, temporibus veniam
            voluptas voluptate. Beatae, deserunt.
        </div>
        <div>Aperiam culpa hic ipsa ipsum minus, nobis obcaecati odit placeat, quae quam reprehenderit sint, sunt ut vel
            vitae voluptatibus voluptatum! Aliquam cupiditate exercitationem ipsa nemo odio possimus quo ullam voluptas!
        </div>
        <div>Adipisci, animi at consequatur distinctio dolor dolore eaque eligendi et harum libero molestiae, natus
            nulla numquam perspiciatis provident quaerat, reiciendis rem tempore veniam voluptas. Cum molestias nihil
            repellat repudiandae voluptas.
        </div>
        <div>Dignissimos distinctio ducimus impedit ipsam labore laudantium minima nostrum obcaecati odit repellat
            repellendus sapiente suscipit tempora temporibus, vero. Amet aperiam magni odio quam sapiente? Ab illo
            itaque magnam provident repudiandae.
        </div>
        <div>Aliquid id maiores similique veniam. Architecto cumque ducimus ipsa, itaque nesciunt quibusdam reiciendis
            veniam voluptate? Consequatur cupiditate dicta, dolore error expedita incidunt laboriosam laborum nam
            officiis quasi, sit unde, vitae!
        </div>
        <div>A adipisci aperiam asperiores, corporis culpa debitis ea iste nihil porro quae quaerat quasi quibusdam quo
            repellendus suscipit tempore vitae voluptatem! Animi dolore error eveniet ex quaerat qui sed tempore.
        </div>
        <div>Beatae commodi, consectetur dolore ea esse ex fuga fugiat illo ipsa iste, magni minus necessitatibus quas
            qui quia quibusdam quisquam quo recusandae repudiandae rerum saepe sequi similique tempora velit voluptates.
        </div>
        <div>Accusamus aliquid autem cupiditate deserunt dolor dolorum, et impedit iusto nisi non porro sapiente sit,
            soluta veniam voluptate? Cumque eveniet minus non numquam, odio praesentium vel. Consequuntur magnam
            molestiae omnis.
        </div>
        <div>Accusamus architecto debitis dicta eaque earum enim et expedita in molestias necessitatibus nisi nostrum
            nulla pariatur quia quis repellendus sit ullam, vel voluptas voluptatem? Ab aut laborum qui rerum
            voluptates!
        </div>
        <div>Ab architecto atque corporis debitis deserunt excepturi facere fugiat incidunt ipsa ipsam laudantium
            molestias natus nihil nisi nobis nulla obcaecati quia quis recusandae rerum similique, tempora vero. Atque,
            ipsum, voluptatem?
        </div>
        <div>Animi beatae dignissimos dolore eaque error est excepturi fuga hic laboriosam nobis officia optio
            perferendis perspiciatis possimus praesentium quos recusandae reiciendis repellendus, saepe similique, sint,
            vitae voluptas voluptatibus? Ducimus, temporibus!
        </div>
        <div>Ad blanditiis consectetur culpa iure magnam non possimus quae ratione ullam vero? Aliquam animi assumenda,
            consectetur eaque error est et id illum iure, iusto laudantium quam quia saepe sunt voluptas.
        </div>
        <div>Accusantium, animi aut delectus doloremque dolorum expedita facere laboriosam omnis perferendis quibusdam
            reiciendis reprehenderit sint velit! Accusamus corporis culpa dicta, id nobis nulla odit porro possimus
            quasi quidem repudiandae totam.
        </div>
        <div>Cumque eius facere harum iste modi ullam unde. Dignissimos ex illum labore neque odio omnis vero voluptas.
            Consequuntur doloribus dolorum earum eius, excepturi incidunt natus optio recusandae, rerum sed voluptatum!
        </div>
        <div>Aliquid aspernatur corporis facilis laudantium nobis porro possimus quisquam? Aliquam corporis distinctio
            eligendi eum facilis modi necessitatibus nobis nostrum numquam, officia officiis quaerat quibusdam similique
            soluta velit vitae voluptatem. Saepe!
        </div>
        <div>Ab assumenda fugit laudantium minima nostrum officia quas quo temporibus veniam voluptatem! Blanditiis
            eaque enim eveniet minus nam. Eaque nesciunt nihil possimus praesentium quaerat voluptate voluptatibus.
            Expedita facilis harum illum.
        </div>
        <div>Animi architecto atque laborum magni modi quidem quisquam rerum sit velit. Adipisci eum exercitationem nam
            odit quo quos veritatis. Animi consectetur cum cupiditate debitis, dolorum iste nobis quia rerum vero.
        </div>
        <div>Aperiam at cum deserunt dolore, expedita fuga hic illum impedit iure laborum maxime molestiae natus nostrum
            optio pariatur perferendis porro quia reiciendis repellendus saepe sapiente sit vel veritatis voluptas
            voluptates.
        </div>
        <div>Animi aspernatur, autem consequatur, debitis dolorem eos ex illo ipsa optio possimus praesentium
            repudiandae unde veniam. Aliquam at, consequuntur cupiditate harum molestiae optio pariatur repellat
            repellendus sequi sint tenetur veniam?
        </div>
    </div>
    <script>
        let buttonE= document.getElementById('btn');
        buttonE.addEventListener('click',function (){
            alert('哈哈哈，点我了吧~')
        })

        let h4E = document.querySelector('h4');
        h4E.addEventListener('mouseover',function (){
            console.log('标题被查看了');
        })
        /*window对象是浏览器内置的全局对象，代表了当前浏览器窗口*/
        window.addEventListener('resize',function (){
           // alert("窗口大小被resize改动了！")
        })
        window.addEventListener('scroll',function (){
            alert('窗口被滚动了！')
        })

    </script>

</body>
</html>